<template>
  <el-pagination v-model:currentPage="_page" v-model:page-size="_pageSize" :total="total"
    :page-sizes="[5, 10, 15, 20, 25, 30, 50, 100, 10000]" layout="total, sizes, prev, pager, next, jumper"
    @size-change="sizeChange" @current-change="currentChange" />
</template>

<script lang="ts" setup>
// 分页组件, 全局使用, 可以实现全局记忆用户选择的分页大小
import { useVModel } from '@vueuse/core'
import { getPageSize, setPageSize } from '/@/utils'
import { ElPagination } from 'element-plus';

defineOptions({
  name: 'MkPagination'
})
//定义公共参数
const props = defineProps({
  page: {
    type: Number,
    default: 0,
  },
  pageSize: {
    type: Number,
    default: function () {
      return getPageSize()
    },
  },
  total: {
    type: Number,
    default: 0,
  },
})
//定义回调函数
let emits = defineEmits(['update:page', 'update:pageSize', 'query'])
const _page = useVModel(props, 'page', emits)
const _pageSize = useVModel(props, 'pageSize', emits)


//修改了页大小
const sizeChange = (pageSize: number) => {
  setPageSize(pageSize)
  _page.value = 1 // 回到第一页
  _pageSize.value = pageSize //记录页大小
  // 回到第一页 : 修改页大小时SkipCount修改为0
  query(0, _pageSize.value)
}

//修改了当前页码
const currentChange = (currentPage: number) => {
  _page.value = currentPage  //修改页码时,计算SkipCount
  query(_page.value, _pageSize.value)
}

const query = (skipCount: number, pageSize: number) => {
  emits('query') //调用父组件执行查询
}

</script>
